<template>
    <div>
        <el-table border
                  :data="tableData" stripe
                  style="width: 100%;height: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column
                    label="序号"
                    type="index"
                    width="50"
                    align="center">
                <template slot-scope="{row, $index}">
                    <span>{{(curPage - 1) * 10 + $index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="url" label="数据包" :min-width="140">
                <template slot-scope="{row, $index}">
                    <el-button v-if="row.updateUrl" class="el-button el-button--mini el-button--primary"
                               @click="download(row.updateUrl)">
                        下载
                    </el-button>
                    <span v-else>无数据包</span>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="上传人" :min-width="140">
                <template slot-scope="{row, $index}">
                    <span>{{row.userName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="updateTime" label="上传时间" :min-width="240">
                <template slot-scope="{row, $index}">
                    <span>{{row.updateTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="state" label="质检状态" :min-width="220">
                <template slot-scope="{row, $index}">
                    <span>{{state[row.state - 1]}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="data" label="操作" :min-width="110">
                <template slot-scope="{row, $index}">
                    <el-button class="el-button el-button--mini el-button--danger"
                               @click="opDialog(row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <msg-dialog @yes="deleteTask" @no="onCancel" :dialog-visible="dialogVisible"
                    :msg="msg"></msg-dialog>
    </div>
</template>
<script>
    import qs from "qs";
    import MsgDialog from "../menu/MsgDialog";

    export default {
        name: "NodeTable",
        components: {
            MsgDialog
        },
        data() {
            return {
                msg: '确定删除此条记录',
                editTaskName: false,
                editRemark: false,
                multipleSelection: [],
                state: ["等待质检", "质检不合格", "质检合格"],
                dialogVisible: false,
                chooseId: ''
            }
        },
        props: {
            tableData: {
                type: Array,
                defult: []
            },
            curPage: {
                type: Number,
                defult: 1
            },
            canEdit: {
                type: Boolean,
                defult: true
            }
        },
        methods: {
            download(url) {
                window.open(url);
            },
            endEdit(event) {
                this.editTaskName = false;
                this.editRemark = false;
            },
            enterBlur(event) {
                event.target.blur()
            },
            opDialog(id) {
                this.dialogVisible = true;
                this.chooseId = id;
            },
            changeName(index, className) {
                //设置是否可以编辑
                // tableData为表格数据
                this.editTaskName = new Array(this.tableData.length);
                this.editTaskName[index] = true;
                // this.saveItem = this.tableData[index];
                this.$set(this.editTaskName, index, true);
                //让input自动获取焦点
                this.$nextTick(function () {
                    let editInputList = document.getElementsByClassName(className);
                    editInputList[0].children[0].focus();
                });

            },
            changeRemark(index, className) {
                this.editRemark = new Array(this.tableData.length);
                this.editRemark[index] = true;
                // this.saveItem = this.tableData[index];
                this.$set(this.editRemark, index, true);
                this.$nextTick(function () {
                    let editInputList = document.getElementsByClassName(className);
                    editInputList[0].children[0].focus();
                });

            },
            deleteTask() {
                axios.post("/bjdzms/taskRecord/del",
                    qs.stringify({
                        'id': this.chooseId
                    })).then(data => {
                    this.total = data.data;
                    this.dialogVisible = false;
                    this.$emit('updateData');
                });
            },
            onCancel() {
                this.dialogVisible = false;
                this.chooseId = '';
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.taskTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.taskTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            resetDateFilter() {
                this.$refs.taskTable.clearFilter('data');
            },
            clearFilter() {
                this.$refs.taskTable.clearFilter();
            },
            formatter(row, column) {
                return row.address;
            },
            handleEdit(index, row) {
                //console.log(index, row);
            },
            handleDelete(index, row) {
                //console.log(index, row);
            },
            splitName(string) {
                if (string !== undefined && string !== null) {
                    let urls = string.split('/');
                    return urls[urls.length - 1];
                }
            }
        },
    }
</script>

<style scoped>

</style>
